<template>
  <el-dialog
    class="params-class"
    :append-to-body="true"
    title="外部参数设置"
    v-model="state.outerParamsSetVisible"
    width="70vw"
    top="10vh"
    trigger="click"
  >
    <el-row style="height: 550px">
      <el-row v-loading="state.loading">
        <el-row class="preview">
          <el-col :span="8" class="preview-left">
            <el-row class="tree-head">
              <span class="head-text">参数列表</span>
              <span class="head-filter">
                <el-button type="primary" icon="Plus" text @click="addOuterParamsInfo"> </el-button>
              </span>
            </el-row>
            <el-row class="tree-content">
              <el-tree
                class="custom-tree"
                menu
                ref="outerParamsInfoTree"
                :data="state.outerParamsInfoArray"
                node-key="paramsInfoId"
                highlight-current
                :props="state.treeProp"
                @node-click="nodeClick"
              >
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <span>
                      <div @click.stop>
                        <span class="auth-span">
                          <el-checkbox
                            v-model="data.checked"
                            @change="sourceFieldCheckedChange(data)"
                          />
                        </span>
                      </div>
                    </span>
                    <span :id="'paramName-' + data.paramsInfoId">
                      <el-input
                        v-if="curEditDataId === data.paramsInfoId"
                        v-model="data.paramName"
                        size="small"
                        :placeholder="$t('visualization.input_param_name')"
                        @blur="closeEdit"
                      />
                      <span class="tree-select-field" v-else-if="data.paramName">
                        {{ data.paramName }}
                      </span>
                      <span class="tree-select-field" v-else> 未配置参数名 </span>
                    </span>
                    <span class="icon-more">
                      <handle-more
                        style="margin-right: 16px"
                        @handle-command="cmd => outerParamsOperation(cmd, node, data)"
                        :menu-list="state.optMenu"
                        icon-name="icon_more_outlined"
                        placement="bottom-start"
                      ></handle-more>
                    </span>
                  </span>
                </template>
              </el-tree>
            </el-row>
          </el-col>
          <el-col :span="16" class="preview-show">
            <el-row v-if="state.curNodeId">
              <el-row class="new-params-title"> 选择参数关联组件 </el-row>
              <el-row class="new-params-filter" v-if="state.outerParamsInfo?.filterInfo?.length">
                <div style="display: flex" class="inner-content">
                  <div style="width: 16px; margin-top: 2px" class="expand-custom-outer">
                    <div class="expand-custom">
                      <el-icon @click="() => (state.filterExpand = !state.filterExpand)"
                        ><CaretBottom v-show="state.filterExpand" />
                        <CaretRight v-show="!state.filterExpand" />
                      </el-icon>
                    </div>
                  </div>
                  <div style="flex: 1">查询组件</div>
                  <div style="flex: 1">关联条件</div>
                </div>
                <div class="outer-filter-content">
                  <div
                    v-show="state.filterExpand"
                    style="display: flex"
                    class="inner-filter-content"
                    v-for="(baseFilter, index) in state.outerParamsInfo?.filterInfo"
                    :key="index"
                  >
                    <div style="width: 16px"></div>
                    <div style="flex: 1; line-height: 32px">
                      <Icon
                        style="margin-top: 4px"
                        class-name="view-type-icon"
                        name="filter-params"
                      />
                      <span>{{ findFilterName(baseFilter.id) }}</span>
                    </div>
                    <div style="flex: 1">
                      <el-select
                        v-model="baseFilter.filterSelected"
                        filterable
                        style="width: 100%"
                        placeholder="请选择查询条件"
                        clearable
                      >
                        <el-option
                          v-for="item in baseFilter.propValue"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                          <span style="font-size: 12px"> {{ item.name }}</span>
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
              </el-row>
              <el-row class="new-params-ds" v-if="state.outerParamsInfo?.datasetInfo?.length">
                <div style="display: flex" class="inner-content">
                  <div style="width: 16px; margin-top: 2px" class="expand-custom-outer">
                    <div class="expand-custom">
                      <el-icon @click="() => (state.datasetExpand = !state.datasetExpand)"
                        ><CaretBottom v-show="state.datasetExpand" />
                        <CaretRight v-show="!state.datasetExpand" />
                      </el-icon>
                    </div>
                  </div>
                  <div style="flex: 1">图表</div>
                  <div style="flex: 1">关联字段或参数</div>
                </div>
                <div class="outer-dataset-content">
                  <div
                    v-show="state.datasetExpand"
                    class="inner-dataset-content"
                    v-for="(baseDatasetInfo, index) in state.outerParamsInfo?.datasetInfo"
                    :key="index"
                  >
                    <div style="display: flex; width: 100%">
                      <div style="width: 16px; margin-top: 7px" class="expand-custom-outer">
                        <div class="expand-custom">
                          <el-icon
                            @click="
                              () => (baseDatasetInfo.viewExpand = !baseDatasetInfo.viewExpand)
                            "
                            ><CaretBottom v-show="baseDatasetInfo.viewExpand" />
                            <CaretRight v-show="!baseDatasetInfo.viewExpand" />
                          </el-icon>
                        </div>
                      </div>
                      <div style="flex: 1; display: flex; line-height: 32px">
                        <div style="width: 16px; margin-top: 2px; margin-right: 4px">
                          <el-icon>
                            <Icon name="icon_dataset" />
                          </el-icon>
                        </div>
                        <span>{{ baseDatasetInfo.name }}</span>
                      </div>
                      <div style="flex: 1; margin-left: -16px">
                        <el-select
                          v-model="baseDatasetInfo.fieldIdSelected"
                          filterable
                          clearable
                          style="width: 100%"
                          placeholder="请选择"
                        >
                          <template #header>
                            <el-tabs
                              class="params-select--header"
                              v-model="baseDatasetInfo.activelist"
                            >
                              <el-tab-pane label="字段" name="dimensionList"></el-tab-pane>
                              <el-tab-pane label="参数" name="parameterList"></el-tab-pane>
                            </el-tabs>
                          </template>
                          <el-option
                            v-for="item in findFields(
                              baseDatasetInfo.activelist,
                              baseDatasetInfo.datasetFields
                            )"
                            :key="item.attachId"
                            :label="item.name"
                            :value="item.attachId"
                          >
                            <Icon
                              style="width: 14px; height: 14px"
                              :name="`field_${fieldType[item.deType]}`"
                              :className="`field-icon-${fieldType[item.deType]}`"
                            />
                            <span style="font-size: 12px">{{ item.name }}</span>
                          </el-option>
                        </el-select>
                      </div>
                    </div>

                    <div class="ds-view-content" v-show="baseDatasetInfo.viewExpand">
                      <div style="display: flex; width: 100%; height: 22px">
                        <div class="ds-content-title">选择关联的图表</div>
                        <div class="custom-view-diver"></div>
                        <div>
                          <el-checkbox
                            style="margin-top: -4px"
                            v-model="baseDatasetInfo.checkAll"
                            :indeterminate="baseDatasetInfo.checkAllIsIndeterminate"
                            :disabled="!baseDatasetInfo.fieldIdSelected"
                            @change="batchSelectChange($event, baseDatasetInfo)"
                            >全选</el-checkbox
                          >
                        </div>
                      </div>
                      <div style="display: flex; flex-wrap: wrap; width: 100%">
                        <div
                          class="view-item"
                          v-for="viewInfo in baseDatasetInfo.datasetViews"
                          :key="viewInfo"
                        >
                          <div>
                            <el-checkbox
                              v-model="viewInfo.checked"
                              :disabled="!baseDatasetInfo.fieldIdSelected"
                              @change="datasetInfoChange(baseDatasetInfo)"
                            />
                          </div>
                          <div>
                            <Icon
                              class-name="view-type-icon"
                              style="margin: 0 4px"
                              :name="viewInfo.chartType"
                            />
                          </div>
                          <span style="font-size: 12px"> {{ viewInfo.chartName }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-row>
            </el-row>
            <div v-else class="empty">
              <empty-background description="请配置参数" img-type="noneWhite" />
            </div>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="root-class">
        <el-button @click="cancel()">{{ t('commons.cancel') }} </el-button>
        <el-button type="primary" @click="save()">{{ t('commons.confirm') }} </el-button>
      </el-row>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { ElCol, ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import { deepCopy } from '@/utils/utils'
import generateID from '@/utils/generateID'
import { queryWithVisualizationId, updateOuterParamsSet } from '@/api/visualization/outerParams'
import { queryOuterParamsDsInfo, viewDetailList } from '@/api/visualization/dataVisualization'
import checkArrayRepeat from '@/utils/check'
import HandleMore from '@/components/handle-more/src/HandleMore.vue'
import { fieldType } from '@/utils/attr'
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, componentData } = storeToRefs(dvMainStore)
const outerParamsInfoTree = ref(null)
const { t } = useI18n()
const curEditDataId = ref(null)
const snapshotStore = snapshotStoreWithOut()

const state = reactive({
  filterExpand: true,
  datasetExpand: true,
  loading: false,
  outerParamsSetVisible: false,
  optMenu: [
    {
      label: '重命名',
      svgName: 'edit',
      command: 'rename'
    },
    {
      label: '删除',
      svgName: 'delete',
      command: 'delete'
    }
  ],
  treeProp: {
    id: 'paramsInfoId',
    label: 'paramName',
    children: 'children'
  },
  outerParams: {
    checked: false,
    outerParamsInfoArray: []
  },
  baseDatasetInfo: [],
  baseFilterInfo: [],
  outerParamsInfoArray: [],
  mapOuterParamsInfoArray: {},
  panelList: [],
  curNodeId: null,
  outerParamsInfo: {
    content: '',
    linkType: '',
    targetViewInfoList: [],
    paramsInfoId: null
  },
  currentFiledTreeNode: null,
  defaultOuterParamsInfo: {
    paramName: '',
    checked: true,
    targetViewInfoList: []
  },
  defaultTargetViewInfo: {
    targetViewId: null,
    targetFieldId: null
  },
  currentLinkPanelViewArray: [],
  viewIdFieldArrayMap: {},
  widgetSubjectsTrans: {
    timeYearWidget: '年份过滤组件',
    timeMonthWidget: '年月过滤组件',
    timeDateWidget: '日期过滤组件',
    timeDateRangeWidget: '日期范围过滤组件',
    textSelectWidget: '文本下拉过滤组件',
    textSelectGridWidget: '文本列表过滤组件',
    textInputWidget: '文本搜索过滤组件',
    textSelectTreeWidget: '下拉树过滤组件',
    numberSelectWidget: '数字下拉过滤组件',
    numberSelectGridWidget: '数字列表过滤组件',
    numberRangeWidget: '数值区间过滤组件'
  }
})

const viewSelectedField = computed(() =>
  state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
)

const closeEdit = () => {
  curEditDataId.value = null
}

const outerParamsOperation = (cmd, node, data) => {
  if (cmd === 'rename') {
    curEditDataId.value = data.paramsInfoId
  } else if (cmd === 'delete') {
    removeOuterParamsInfo(node, data)
  }
}

const fieldIdDisabledCheck = targetViewInfo => {
  return (
    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
  )
}

const getFieldArray = id => {
  return state.viewIdFieldArrayMap[id]
}

const initParams = async () => {
  state.baseFilterInfo = []
  state.baseDatasetInfo = []
  // 同步过滤组件信息
  componentData.value.forEach(componentItem => {
    if (componentItem.component === 'VQuery') {
      state.baseFilterInfo.push(componentItem)
    } else if (componentItem.component === 'Group') {
      componentItem.propValue.forEach(groupItem => {
        if (groupItem.component === 'VQuery') {
          state.baseFilterInfo.push(groupItem)
        }
      })
    } else if (componentItem.component === 'DeTabs') {
      componentItem.propValue.forEach(tabItem => {
        tabItem.componentData.forEach(tabComponent => {
          if (tabComponent.component === 'VQuery') {
            state.baseFilterInfo.push(tabComponent)
          }
        })
      })
    }
  })
  // 同步基础数据集信息
  await queryOuterParamsDsInfo(dvInfo.value.id).then(rsp => {
    state.baseDatasetInfo = rsp.data
  })
  // 获取当前仪表板外部跳转信息
  queryWithVisualizationId(dvInfo.value.id).then(rsp => {
    state.outerParams = rsp.data
    state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
    if (state.outerParamsInfoArray.length >= 1) {
      state.outerParamsInfoArray.forEach(outerParamsInfo => {
        const newBaseFilterInfo = deepCopy(state.baseFilterInfo)
        const newBaseDatasetInfo = deepCopy(state.baseDatasetInfo)
        paramsCheckedAdaptor(outerParamsInfo, newBaseFilterInfo, newBaseDatasetInfo)
        state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
      })
      state.curNodeId = null
      const firstNode = state.outerParamsInfoArray[0]
      nextTick(() => {
        outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
        nodeClick(firstNode)
      })
    }
  })

  getPanelViewList(dvInfo.value.id)
}

const findFields = (type, datasetFields) => {
  if (type === 'parameterList') {
    return datasetFields.filter(field => field.attachId.indexOf('DE') > -1)
  } else {
    return datasetFields.filter(field => field.attachId.indexOf('DE') === -1)
  }
}

const datasetInfoChange = datasetInfo => {
  let viewCheckCount = 0
  datasetInfo.datasetViews.forEach(dsView => {
    if (dsView['checked']) {
      viewCheckCount++
    }
  })
  datasetInfo['checkAll'] = viewCheckCount === datasetInfo.datasetViews.length
  datasetInfo['checkAllIsIndeterminate'] =
    viewCheckCount > 0 && viewCheckCount < datasetInfo.datasetViews.length
}

const paramsCheckedAdaptor = (outerParamsInfo, newBaseFilterInfo, newBaseDatasetInfo) => {
  const dsFieldIdSelected = {}
  const viewMatchIds = []
  outerParamsInfo.targetViewInfoList.forEach(targetViewInfo => {
    viewMatchIds.push(targetViewInfo.targetViewId)
    dsFieldIdSelected[targetViewInfo.targetDsId] =
      targetViewInfo.targetFieldId === 'empty'
        ? targetViewInfo.targetViewId
        : targetViewInfo.targetFieldId
  })
  if (newBaseDatasetInfo) {
    newBaseDatasetInfo.forEach(datasetInfo => {
      datasetInfo['fieldIdSelected'] = dsFieldIdSelected[datasetInfo.id]
      datasetInfo['viewExpand'] = true
      let viewCheckCount = 0
      datasetInfo.datasetViews.forEach(dsView => {
        if (viewMatchIds.includes(dsView.chartId)) {
          dsView['checked'] = true
          viewCheckCount++
        } else {
          dsView['checked'] = false
        }
      })
      datasetInfo['checkAll'] = viewCheckCount === datasetInfo.datasetViews.length
      datasetInfo['checkAllIsIndeterminate'] =
        viewCheckCount > 0 && viewCheckCount < datasetInfo.datasetViews.length
      if (datasetInfo['fieldIdSelected'] && datasetInfo['fieldIdSelected'].indexOf('DE') > -1) {
        datasetInfo['activelist'] = 'parameterList'
      } else {
        datasetInfo['activelist'] = 'dimensionList'
      }
    })
  }
  if (newBaseFilterInfo) {
    newBaseFilterInfo.forEach(filterInfo => {
      filterInfo['filterSelected'] = dsFieldIdSelected[filterInfo.id]
    })
  }
  outerParamsInfo['filterInfo'] = newBaseFilterInfo
  outerParamsInfo['datasetInfo'] = newBaseDatasetInfo
}

const cancel = () => {
  state.outerParamsSetVisible = false
}

const save = () => {
  const outerParamsCopy = deepCopy(state.outerParams)
  outerParamsCopy.outerParamsInfoArray?.forEach(outerParamsInfo => {
    outerParamsInfo.targetViewInfoList = []
    outerParamsInfo.filterInfo?.forEach(baseFilterInfo => {
      // 存在过滤器选项被选
      if (baseFilterInfo.filterSelected) {
        outerParamsInfo.targetViewInfoList.push({
          targetViewId: baseFilterInfo.filterSelected,
          targetDsId: baseFilterInfo.id,
          targetFieldId: 'empty'
        })
      }
    })
    outerParamsInfo.datasetInfo?.forEach(baseDatasetInfo => {
      // 存在数据集字段被选中
      if (baseDatasetInfo.fieldIdSelected) {
        baseDatasetInfo.datasetViews?.forEach(dsView => {
          if (dsView.checked) {
            outerParamsInfo.targetViewInfoList.push({
              targetViewId: dsView.chartId,
              targetDsId: baseDatasetInfo.id,
              targetFieldId: baseDatasetInfo.fieldIdSelected
            })
          }
        })
      }
    })
  })
  updateOuterParamsSet(outerParamsCopy).then(() => {
    ElMessage({
      message: t('commons.save_success'),
      type: 'success',
      showClose: true
    })
    snapshotStore.recordSnapshotCache('renderChart')
    cancel()
  })
}

const nodeClick = data => {
  state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
  state.curNodeId = data.paramsInfoId
}

// 获取当前图表字段 关联仪表板的图表信息列表
const getPanelViewList = dvId => {
  viewDetailList(dvId).then(rsp => {
    state.viewIdFieldArrayMap = {}
    state.currentLinkPanelViewArray = rsp.data
    if (state.currentLinkPanelViewArray) {
      state.currentLinkPanelViewArray.forEach(view => {
        state.viewIdFieldArrayMap[view.id] = view.tableFields
      })
    }
    // 增加过滤组件匹配
    componentData.value.forEach(componentItem => {
      if (componentItem.component === 'VQuery') {
        componentItem.propValue.forEach(filterItem => {
          state.currentLinkPanelViewArray.push({
            id: filterItem.id,
            type: 'filter',
            name: filterItem.name,
            title: filterItem.name
          })
          state.viewIdFieldArrayMap[filterItem.id] = [
            { id: 'empty', name: t('visualization.filter_no_select') }
          ]
        })
      }
    })
  })
}

const addOuterParamsField = () => {
  state.outerParamsInfo.targetViewInfoList.push({
    targetViewId: '',
    targetFieldId: ''
  })
}
const deleteOuterParamsField = index => {
  state.outerParamsInfo.targetViewInfoList.splice(index, 1)
}

const viewInfoOnChange = targetViewInfo => {
  if (
    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
  ) {
    targetViewInfo.targetFieldId = 'empty'
  } else {
    targetViewInfo.targetFieldId = null
  }
}

const initSelected = data => {
  nextTick(() => {
    outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
    nodeClick(data)
  })
}

const sourceFieldCheckedChange = data => {
  if (data.checked) {
    state.outerParams.checked = true
  }
  nextTick(() => {
    outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
    nodeClick(data)
  })
}

const addOuterParamsInfo = () => {
  state.outerParams.checked = true
  const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
  outerParamsInfo['paramsInfoId'] = generateID()
  const newBaseFilterInfo = deepCopy(state.baseFilterInfo)
  const newBaseDatasetInfo = deepCopy(state.baseDatasetInfo)
  paramsCheckedAdaptor(outerParamsInfo, newBaseFilterInfo, newBaseDatasetInfo)
  state.outerParamsInfoArray.push(outerParamsInfo)
  state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
  curEditDataId.value = outerParamsInfo['paramsInfoId']
  initSelected(outerParamsInfo)
}

const removeOuterParamsInfo = (node, data) => {
  const parent = node.parent
  const children = parent.data.children || parent.data
  const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
  children.splice(index, 1)
  if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
    delete state.mapOuterParamsInfoArray[data.paramsInfoId]
    state.curNodeId = null
  }
}
const batchSelectChange = (value, baseDatasetInfo) => {
  // do change
  baseDatasetInfo.datasetViews.forEach(viewInfo => {
    viewInfo.checked = value
  })
  baseDatasetInfo.checkAll = value
  baseDatasetInfo.checkAllIsIndeterminate = false
}

const optInit = () => {
  initParams()
  state.outerParamsSetVisible = true
}

const findFilterName = id => {
  return dvMainStore.canvasViewInfo[id]?.title
}

defineExpose({
  optInit
})
</script>

<style scoped lang="less">
.root-class {
  margin: 15px 0px 5px;
  justify-content: right;
}

.preview {
  margin-top: 5px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  height: 470px !important;
  overflow: hidden;
  background-size: 100% 100% !important;
}

.tree-head {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #3d4d66;
  border-bottom: 1px solid #e6e6e6;
  .head-text {
    margin-left: 16px;
    font-weight: 500;
    font-size: 14px;
    color: #1f2329;
  }
  .head-filter {
    flex: 1;
    text-align: right;
    margin-right: 16px;
    font-weight: 400;
    font-size: 12px;
    color: #646a73;
  }
}

:deep(.ed-row) {
  width: 100%;
}

.m-del-icon-btn {
  color: #646a73;
  margin-top: 4px;
  margin-left: 4px;

  &:hover {
    background: rgba(31, 35, 41, 0.1) !important;
  }
  &:focus {
    background: rgba(31, 35, 41, 0.1) !important;
  }
  &:active {
    background: rgba(31, 35, 41, 0.2) !important;
  }
}

.empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.preview-show {
  border-left: 1px solid #e6e6e6;
  background-size: 100% 100% !important;
  height: 100%;
  overflow-y: auto;
}

.view-type-icon {
  color: #3370ff;
  width: 22px;
  height: 14px;
}

.custom-tree {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background: none;
  :deep(.ed-tree-node__expand-icon) {
    display: none;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;

  .icon-more {
    margin-left: auto;
    visibility: visible;
  }

  &:hover .icon-more {
    margin-left: auto;
    visibility: visible;
  }
}

.link-icon-join {
  font-size: 20px;
  margin-top: 7px;
  margin-left: 8px;
  margin-right: 8px;
}

.inner-content {
  width: 100%;
  font-size: 14px;
}

.outer-filter-content {
  width: 100%;
}

.outer-dataset-content {
  width: 100%;
  padding-left: 16px;
}

.inner-filter-content {
  width: 100%;
  margin-top: 12px;
}

.inner-dataset-content {
  width: 100%;
  margin-top: 12px;
}

.slot-class {
  color: white;
}

.bottom {
  margin-top: 15px;
  text-align: center;
}

.ellip {
  /*width: 100%;*/
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
  text-align: center;
  background-color: #f7f8fa;
  color: #3d4d66;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  border-radius: 3px;
}

.select-filed {
  /*width: 100%;*/
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
  color: #3d4d66;
  font-size: 12px;
  line-height: 35px;
  height: 35px;
  border-radius: 3px;
}

:deep(.ed-popover) {
  height: 200px;
  overflow: auto;
}

.custom-position {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  flex-flow: row nowrap;
  color: #9ea6b2;
}

.tree-style {
  padding: 10px 15px;
  height: 100%;
  overflow-y: auto;
}

:deep(.vue-treeselect__control) {
  height: 28px;
}

:deep(.vue-treeselect__single-value) {
  color: #606266;
  line-height: 28px !important;
}

.auth-span {
  float: right;
  width: 16px;
  margin-right: 8px;
  margin-left: 16px;
}

.tree-content {
  height: calc(100% - 70px);
  overflow-y: auto;
}

.tree-bottom {
  margin-top: 7px;
  text-align: center;
}

:deep(.vue-treeselect__placeholder) {
  line-height: 28px;
}

:deep(.ed-tree--highlight-current .ed-tree-node.is-current > .ed-tree-node__content) {
  background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
}

.tree-content ::deep(.ed-input__inner) {
  background: transparent;
  border: 0px !important;
}

.params-class ::deep(.ed-dialog__title) {
  font-size: 14px;
}

.params-class ::deep(.ed-dialog__headerbtn) {
  z-index: 2;
}

.params-class ::deep(.ed-dialog__header) {
  padding: 20px 20px 0;
}

.params-class ::deep(.ed-dialog__body) {
  padding: 10px 20px 20px;
}

.new-params-title {
  height: 56px;
  font-size: 14px;
  font-weight: 500;
  padding: 16px;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
}

.new-params-filter {
  padding: 16px;
  border-bottom: 1px solid rgba(31, 35, 41, 0.15);
}

.new-params-ds {
  padding: 16px;
}

.expand-custom {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  padding: 0px 1px;
  color: rgba(100, 106, 115, 1);
  &:hover {
    background: rgba(31, 35, 41, 0.1);
    cursor: pointer;
  }
}

.ds-view-content {
  width: calc(100% - 16px);
  border-radius: 4px;
  margin: 8px 16px 0 16px;
  padding: 12px;
  background: rgba(245, 246, 247, 1);
}

.ds-content-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(100, 106, 115, 1);
}

.custom-view-diver {
  width: 1px;
  margin: 4px 8px;
  height: 14px;
  background: rgba(31, 35, 41, 0.15);
}

.preview-left {
  background: rgba(245, 246, 247, 1);
  height: 100%;
  overflow-y: hidden;
}

.view-item {
  display: flex;
  width: 50%;
  line-height: 32px;
}

.ed-select-dropdown__header {
  padding: 0 8px;
  .params-select--header {
    --ed-tabs-header-height: 32px;
    .ed-tabs__item {
      font-weight: 400;
      font-size: 15px;
    }
  }
}

.expand-custom-outer {
  margin-right: 4px;
}
</style>
